<template>
  <div class="echarts" ref="chartRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import bgImg from "@/assets/preview (16).png"
type EChartsOption = echarts.EChartsOption;

let chart: echarts.ECharts;
let chartRef = ref();

onMounted(() => {
  chart = echarts.init(chartRef.value);
  chart.setOption(option);
});

const option: EChartsOption = {
  legend: {
    orient: "vertical", // 垂直方向排列
    right: "0", // 图例距离右侧的距离
    top: "20%",
    textStyle: {
      color: "#fff", // 文字颜色
    },
    formatter: (name) => {
      // 使用换行符手动控制文字换行
      if (name.length > 5) { // 如果文字长度超过5个字符，则强制换行
        return name.slice(0, 5) + "\n" + name.slice(5);
      }
      return name;
    },
  },
  color: ["#ffffff", "#FF3A2F", "#EC6700", "#FFA400", "#FFD385", "#3ba272"],
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["44%", "56%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "其他" },
        { value: 735, name: "机关事业单位" },
        { value: 580, name: "农村党员" },
        { value: 484, name: "退休党员" },
        { value: 300, name: "非公有制经济组织党员" },
      ],
    },
  ],
  graphic: [
    {
      type: "image", // 类型为图片
      left: "center", // 水平居中
      top: "center", // 垂直居中
      style: {
        image: bgImg, // 使用外部图片URL进行测试
        width: 200, // 设置图片宽度
        height: 150, // 设置图片高度
      },
      z: 10, // 确保图片显示在圆环的上方
    },
  ],
};
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 250px;
  margin-left: -150px;
}
</style>
